<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染指令v-for的基本用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <!-- 当需要将一个数组遍历或枚举一个对象显示时，会使用v-for指令 表达式要结合in使用 -->
        <!-- 遍历数组 -->
        <ul>
            <!-- books是数组，book 是当前数组元素的别名 支持 of in 作为分隔符 -->
            <li v-for="book in books">{{book.name}}</li>
        </ul>
        <ul>
            <!-- books 第二项是当前的索引 -->
            <li v-for="(book,index,xx ) in books">{{xx}}-{{index+1}}-{{book.name}}</li>
        </ul>
        <ul>
            <template v-for="(book,index) in books">
                <li>{{index+1}}-书名:{{book.name}}</li>
                <li>{{index+1}}-作者:{{book.author}}</li>
            </template>
        </ul>

        <hr>
        <!-- 遍历对象 -->
        <span v-for="value in user">{{value}}-</span>
        <ul>
            <!--对象的参数1.值，2.键名，3.索引  -->
            <li v-for="(value,key,index) in user">{{index+1}}-{{key}}-{{value}}</li>
        </ul>
        <hr>
        <!-- v-for 迭代整数 -->
        <p v-for="n in 5">{{n}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                books: [{
                    name: '《Vue.js实践》',
                    author: '梁灏'
                }, {
                    name: '《JavaScritpt语言精粹》',
                    author: "Douglas Crockford"
                }, {
                    name: '《JavaScript高级程序设计》',
                    author: "Nicholas C.Zakas"
                }, ],
                user: {
                    name: 'Aresn',
                    gender: 'man',
                    age: 66,
                }
            }
        })
    </script>
</body>

</html>